<template>
  <div class="app-container">

    <el-tabs type="card" @tab-click="handleClick">
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 网站信息
        </span>

        <el-form
            style="margin-left: 20px;"
            label-position="left"
            :model="webConfig"
            label-width="100px"
            ref="from"
        >
          <el-row :gutter="12">
            <el-col :span="10">
              <el-form-item label="网站logo">
                <el-upload
                    class="avatar-uploader1"
                    action
                    ref="upload"
                    :show-file-list="false"
                    :disabled="!canUpdate"
                    action="#"
                    :before-upload="uploadBefore"
                    :http-request="uploadLogo">
                  <img v-if="webConfig.logo" :src="webConfig.logo" class="avatar1">
                  <i v-else class="el-icon-plus avatar-uploader-icon1"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="游客头像" prop="touristAvatar">
                <el-upload
                    class="avatar-uploader1"
                    action
                    ref="upload"
                    :show-file-list="false"
                    :disabled="!canUpdate"
                    action="#"
                    :before-upload="uploadBefore"
                    :http-request="uploadTouristAvatar">
                  <img v-if="webConfig.touristAvatar" :src="webConfig.touristAvatar"
                       class="avatar1">
                  <i v-else class="el-icon-plus avatar-uploader-icon1"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item label="网站名称" prop="name">
                <el-input v-model="webConfig.name" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="描述" prop="newPwd1">
                <el-input v-model="webConfig.summary" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item label="网站地址" prop="webUrl">
                <el-input v-model="webConfig.webUrl" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="管理端地址" prop="managementUrl">
                <el-input v-model="webConfig.managementUrl" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item label="码云" prop="giteeUrl">
                <el-input v-model="webConfig.giteeUrl" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="github" prop="githubUrl">
                <el-input v-model="webConfig.githubUrl" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item label="备案号" prop="recordNum">
                <el-input v-model="webConfig.recordNum" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="项目信息" prop="projectInfo">
                <el-input type="textarea" :rows="5" v-model="webConfig.projectInfo" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button v-if="canUpdate" type="primary" @click="submitWebForm()">保 存</el-button>
          </el-form-item>

        </el-form>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 作者信息
        </span>

        <el-form
            style="margin-left: 20px;"
            label-position="left"
            :model="authConfig"
            label-width="100px"
            ref="from"
        >

          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="作者头像">
                <el-upload
                    class="avatar-uploader1"
                    action
                    ref="upload"
                    :show-file-list="false"
                    :disabled="!canUpdate"
                    action="#"
                    :before-upload="uploadBefore"
                    :http-request="uploadAuthAvatar">
                  <img v-if="authConfig.authorAvatar"
                       :src="authConfig.authorAvatar"
                       class="avatar1">
                  <i v-else class="el-icon-plus avatar-uploader-icon1"></i>
                </el-upload>
              </el-form-item>
            </el-col>
<!--            <el-col :span="6">-->
<!--              <el-form-item label="支付宝">-->
<!--                <el-upload-->
<!--                    class="avatar-uploader1"-->
<!--                    action-->
<!--                    ref="upload"-->
<!--                    :show-file-list="false"-->
<!--                    :disabled="!canUpdate"-->
<!--                    action="#"-->
<!--                    :before-upload="uploadBefore"-->
<!--                    :http-request="uploadAliPay">-->
<!--                  <img v-if="authConfig.aliPay" :src="authConfig.aliPay"-->
<!--                       class="avatar1"-->
<!--                       alt="">-->
<!--                  <i v-else class="el-icon-plus avatar-uploader-icon1"></i>-->
<!--                </el-upload>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="微信">-->
<!--                <el-upload-->
<!--                    class="avatar-uploader1"-->
<!--                    action-->
<!--                    ref="upload"-->
<!--                    :show-file-list="false"-->
<!--                    :disabled="!canUpdate"-->
<!--                    action="#"-->
<!--                    :before-upload="uploadBefore"-->
<!--                    :http-request="uploadWeixinPay">-->
<!--                  <img v-if="authConfig.weixinPay" :src="authConfig.weixinPay"-->
<!--                       class="avatar1"-->
<!--                       alt="">-->
<!--                  <i v-else class="el-icon-plus avatar-uploader-icon1"></i>-->
<!--                </el-upload>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
          </el-row>

          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item label="作者" prop="newPwd2">
                <el-input v-model="authConfig.author" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="作者简介" prop="newPwd2">
                <el-input v-model="authConfig.authorInfo" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item label="QQ" prop="qqNumber">
                <el-input v-model="authConfig.qqNumber" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="authConfig.email" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item label="码云" prop="gitee">
                <el-input v-model="authConfig.gitee" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="github" prop="github">
                <el-input v-model="authConfig.github" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item label="关于我">
                <el-input type="textarea" :rows="5" v-model="authConfig.aboutMe" style="width: 400px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button v-if="canUpdate" type="primary" @click="submitAuthForm()">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import {getWebConfig, updateWebConfig, updateAuthConfig} from "@/api/webConfig";
import {mapGetters} from "vuex";
import {hasAuth} from "@/utils/auth";
import {uploadFile} from "@/api/file";

export default {
  data() {
    return {
      loading: [],
      webConfig: {
        id: null,
        logo: "",
        touristAvatar: "",
        name: "",
        summary: "",
        webUrl: "",
        managementUrl: "",
        recordNum: "",
        giteeUrl: "",
        githubUrl: "",
        projectInfo: "",
      },
      authConfig: {
        id: null,
        authorAvatar: "",
        author: "",
        authorInfo: "",
        aboutMe: "",
        aliPay: "",
        weixinPay: "",
        qqNumber: "",
        email: "",
        gitee: "",
        github: "",
      },
      systemConfig: {},
      files: {},
      rules: {
        qqNumber: [
          {pattern: /[1-9]([0-9]{5,11})/, message: '请输入正确的QQ号码'},
        ],
        qqGroup: [
          {pattern: /-?[1-9]\d*/, message: '请输入正确的QQ群'},
        ],
        gitee: [
          {pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/, message: '请输入正确的Gitee地址'},
        ],
        github: [
          {pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/, message: '请输入正确的Github地址'},
        ],
        email: [
          {pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: '请输入正确的邮箱'},
        ]
      }
    };
  },
  computed: {
    ...mapGetters([
      'pres'
    ]),
    canUpdate() {
      return true
    },
  },
  created() {
    // 获取配置
    this.getWebConfigFun();
  },
  methods: {
    handleClick(tab, event) {

    },
    getWebConfigFun: function () {
      getWebConfig().then(response => {
        let data = response.data;
        this.webConfig = data.webConfig;
        this.authConfig = data.authConfig;
      });
    },
    uploadLogo(file) {
      uploadFile(file.file).then(res => {
        this.webConfig.logo = res.data.storeUrl;
        this.loading.close()
      }).catch(e => {
        console.log(e);
      })
    },
    uploadTouristAvatar(file) {
      uploadFile(file.file).then(res => {
        this.webConfig.touristAvatar = res.data.storeUrl;
        this.loading.close()
      }).catch(e => {
        console.log(e);
      })
    },
    uploadAuthAvatar(file) {
      uploadFile(file.file).then(res => {
        this.authConfig.authorAvatar = res.data.storeUrl;
        this.loading.close()
      }).catch(e => {
        console.log(e);
      })
    },
    uploadAliPay(file) {
      uploadFile(file.file).then(res => {
        this.authConfig.aliPay = res.data.storeUrl;
        this.loading.close()
      }).catch(e => {
        console.log(e);
      })
    },
    uploadWeixinPay(file) {
      uploadFile(file.file).then(res => {
        this.authConfig.weixinPay = res.data.storeUrl;
        this.loading.close()
      }).catch(e => {
        console.log(e);
      })
    },
    uploadBefore: function () {
      this.openLoading()
    },
    submitWebForm: function () {
      let form = this.webConfig;
      updateWebConfig(form).then(response => {
        this.$message.success("修改网站配置成功")
        this.getWebConfigFun();
      }).catch(err => {
        console.error(err)
      });
    },
    submitAuthForm: function () {
      let form = this.authConfig;
      updateAuthConfig(form).then(response => {
        this.$message.success("修改作者配置成功")
        this.getWebConfigFun();
      }).catch(err => {
        console.error(err)
      });
    },
    // 打开加载层
    openLoading: function () {
      this.loading = this.$loading({
        lock: true,
        text: "正在加载中~",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    }
  }
};
</script>

<style scoped>

.uploadImgBody :hover {
  border: dashed 1px #00ccff;
}

.avatar-uploader1 {
  border: 1px dashed #d9d9d9;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 100px;
}

.avatar-uploader1:hover {
  border-color: #409eff;
}

.avatar-uploader-icon1 {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar1 {
  width: 98px;
  height: 98px;
  display: block;
  border-radius: 10px;
}
</style>
